<template>
  <div class="UserList">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top:10px;">
      <el-row :gutter="15">
        <el-col :span="8">
          <el-input clearable placeholder="请按姓名查询" v-model="search" @clear="clear"></el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="cheack">查询</el-button>
        </el-col>
      </el-row>
      <template>
        <el-table :data="userList" style="width: 100%;margin-top:10px;" stripe>
          <el-table-column label="#" type="index"></el-table-column>
          <el-table-column label="创建时间" prop="date">
            <template slot-scope="scope">{{scope.row.date | dateFormat}}</template>
          </el-table-column>
          <el-table-column label="用户头像" prop="avater">
            <template slot-scope="scope">
              <div class="demo-type" @click="showUser(scope.row)">
                <el-avatar :size="30" src="../../assets/user.jpg">
                  <img class="avater" :src="scope.row.avater" />
                </el-avatar>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="username"></el-table-column>
          <el-table-column label="年龄" prop="age"></el-table-column>
          <el-table-column label="性别" prop="sex"></el-table-column>
          <el-table-column label="等级" prop="isAdmin">
            <template slot-scope="scope">{{scope.row.isAdmin==false?'普通用户':'管理员'}}</template>
          </el-table-column>
          <el-table-column label="用户状态" prop="isStatus">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="changeStatus(scope.$index, scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="paginations.page_index"
        :page-sizes="paginations.page_sizes"
        :page-size="paginations.page_size"
        :layout="paginations.layout"
        :total="paginations.total"
      ></el-pagination>
    </el-card>
    <!-- 展示用户头像 -->
    <el-dialog title="用户头像" :visible.sync="showDailog" width="30%">
      <img :src="imgUrl" alt="user" style="width:100%" />
    </el-dialog>
  </div>
</template>
   
<script>
export default {
  name: 'UserList',
  data() {
    return {
      userList: [],
      allUserList: [],
      paginations: {
        page_index: 1, //当前位于哪页
        total: 0, //总数
        page_size: 5, //一页显示多少条
        page_sizes: [5, 10, 15, 20], //每页显示多少条
        layout: 'total, sizes, prev, pager, next, jumper' //翻页属性
      },
      search: '',
      imgUrl: '',
      filtertTableData: [],
      showDailog: false
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      this.$axios.get('/api/admin/').then(result => {
        console.log(result)
        this.allUserList = result.data.data.users
        this.filtertTableData = result.data.data.users
        this.setPaginations()
      })
    },
    setPaginations() {
      this.paginations.total = this.allUserList.length
      this.paginations.page_index = 1
      this.paginations.page_size = 5
      this.userList = this.allUserList.filter((item, index) => {
        return index < this.paginations.page_size
      })
    },
    handleEdit() {},
    handleDelete() {},
    handleSizeChange(page_size) {
      this.paginations.page_index = 1
      this.paginations.page_size = page_size
      this.userList = this.allUserList.filter((item, index) => {
        return index < page_size
      })
    },
    handleCurrentChange(page) {
      let index = this.paginations.page_size * (page - 1)
      let nums = this.paginations.page_size * page
      let tables = []
      for (let i = index; i < nums; i++) {
        if (this.allUserList[i]) {
          tables.push(this.allUserList[i])
        }
        this.userList = tables
      }
    },
    cheack() {
      if (!this.search) {
        this.$message({
          type: 'warning',
          message: '请输入查询姓名'
        })
        this.getUser()
        return
      }
      this.allUserList = this.filtertTableData.filter(item => {
        console.log(item)
        return this.search == item.username
      })
      this.setPaginations()
    },
    clear() {
      this.getUser()
    },
    changeStatus(index, row) {
      console.log(row)
      this.$axios
        .put(`/api/admin/roles/${row._id}`, { isStatus: row.isStatus })
        .then(result => {
          console.log(result)
          this.$message({
            type: result.data.type,
            message: result.data.msg
          })
          if (result.data.isAdmin) {
            row.isStatus = result.data.isAdmin
            return
          }
        })
    },
    showUser(row) {
      console.log(row)
      this.imgUrl = row.avater
      this.showDailog = true
    }
  }
}
</script>
<style scoped>
.pagination {
  float: right;
  margin-top: 10px;
}
</style>